<template>
  <div class="bottom">
    <div class="bottomer">
      <div class="bottoml">
        <ul>
          <li>
            <NuxtLink to="/about">公司简介</NuxtLink>
          </li>
          <li>|</li>
          <li>
            <NuxtLink to="/zzzm">公司资质</NuxtLink>
          </li>
          <li>|</li>
          <li>
            <NuxtLink to="/gzjh">工作机会</NuxtLink>
          </li>
          <li>|</li>
          <li>
            <NuxtLink to="/case">客户案例</NuxtLink>
          </li>
          <li>|</li>
          <li>
            <NuxtLink to="/contact">联系我们</NuxtLink>
          </li>
          <li>|</li>
          <li><a href="http://m.xd.sx.cn/">手机版</a></li>
        </ul>
      </div>
      <div class="bottomr">
        <NuxtLink to="/">{{ companyinfo.companyName }}</NuxtLink>
        　&copy;{{ companyinfo.copyRight }}　
        <a href="https://beian.miit.gov.cn/">{{ companyinfo.webbah }}</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const companyinfo: any = useCompanyInfo();
</script>

<style scoped>
.bottom {
  width: 100%;
  height: 35px;
  background: #212121;
  margin: 0 auto;
}

.bottomer {
  width: 965px;
  margin: 20px auto;
  color: #dadada;
}

.bottoml {
  float: left;
  width: 450px;
  display: inline;
}

.bottoml ul {
  text-align: right;
}

.bottoml li {
  list-style: none;
  display: inline;
  line-height: 30px;
  margin-left: 10px;
  float: left;
}

.bottoml a {
  color: #dadada;
  text-decoration: none;
}

.bottoml a:hover {
  color: #f00;
}

.bottomr {
  float: right;
  line-height: 30px;
}

.bottomr a {
  color: #dadada;
  text-decoration: none;
}

.bottomr a:hover {
  color: #f00;
}
</style>